<template>

  <el-page-header @back="router.go(-1);" title="返回">
    <template #content>
      <span>订单详情</span>
    </template>
  </el-page-header>

  <div class="content">

    <el-descriptions :column="3" size="large" border>
      <el-descriptions-item>
        <template #label>订单号</template>
        {{ bookDetail.num }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>顾客</template>
        {{ bookDetail.customerName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>下单时间</template>
        {{ bookDetail.createTime }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>状态</template>
        <el-tag>{{ getBookStatusName(bookDetail.status) }}</el-tag>
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>收货人</template>
        {{ bookDetail.customerName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>手机</template>
        {{ bookDetail.phone }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>地址</template>
        {{ bookDetail.address }}
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>合计</template>
        {{ bookDetail.amount }}
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>支付方式</template>
        {{ bookDetail.payMethod === 1 ? '微信支付' : '支付宝支付' }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>支付时间</template>
        {{ bookDetail.payTime }}
      </el-descriptions-item>


      <el-descriptions-item>
        <template #label>备注</template>
        {{ bookDetail.remark }}
      </el-descriptions-item>


      <el-descriptions-item v-if="bookDetail.status == 5">
        <template #label>送达时间</template>
        {{ bookDetail.deliveryTime }}
      </el-descriptions-item>

      <el-descriptions-item v-if="bookDetail.status == 6">
        <template #label>取消原因</template>
        {{ bookDetail.cancelReason }}
      </el-descriptions-item>
      <el-descriptions-item v-if="bookDetail.status == 7">
        <template #label>拒绝原因</template>
        {{ bookDetail.rejectionReason }}
      </el-descriptions-item>

      <el-descriptions-item v-if="bookDetail.status == 6 || bookDetail.status == 7">
        <template #label>取消时间</template>
        {{ bookDetail.cancelTime }}
      </el-descriptions-item>

    </el-descriptions>

    <!--菜品信息-->
    <el-card style="margin:20px 0">
      <template #header>
        <div class="card-header">
          <span>菜品信息</span>
        </div>
      </template>

      <el-table :data="bookDetail.bookDetailVOList" style="width: 100%">
        <el-table-column prop="name" label="菜品" width="180" />

        <el-table-column label="图片">
          <template #default="scope">
            <el-image style="height: 23px; border: none; cursor: pointer;vertical-align: top" :src="scope.row.photo" />
          </template>
        </el-table-column>

        <el-table-column prop="total" label="数量" width="180" />
        <el-table-column prop="amount" label="金额" />
        <el-table-column prop="foodFlavor" label="口味" />
      </el-table>
    </el-card>
  </div>

  <div class="footer">
    <el-button v-if="bookDetail.status === 2" @click="handleConfirm('接单')">接单</el-button>
    <el-button v-if="bookDetail.status === 2" type="danger" @click="dialogRejectVisible = true">拒单</el-button>
    <el-button v-if="bookDetail.status === 3" type="primary" @click="handleConfirm('派送')">派送</el-button>
    <el-button v-if="bookDetail.status === 4" type="success" @click="handleConfirm('完成')">完成</el-button>
  </div>



  <!--拒单对话框-->
  <el-dialog v-model="dialogRejectVisible" title="拒单操作">
    <el-input v-model="rejectReason" style="width: 100%" :rows="2" type="textarea" placeholder="请输入拒单原因" />

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogRejectVisible = false">关&nbsp;&nbsp;闭</el-button>
        <el-button type="primary" @click="handleReject">拒&nbsp;&nbsp;单</el-button>
      </span>
    </template>
  </el-dialog>


</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import { completeBook, deliveryBook, getBookDetail, receiveBook, rejectBook } from "@/api/book"
import { ElMessageBox, ElMessage } from "element-plus";


const router = useRouter();
const route = useRoute();

const num = route.params.num;
let bookDetail = ref({});
let rejectReason = ref("");

let dialogRejectVisible = ref(false);


let getBookStatusName = (status: number) => {
  if (status === 1) {
    return '待付款'
  } else if (status === 2) {
    return '待接单'
  } else if (status === 3) {
    return '已接单'
  } else if (status === 4) {
    return '派送中'
  } else if (status === 5) {
    return '已完成'
  } else if (status === 6) {
    return '已取消'
  } else {
    return '退款'
  }
}

let handleConfirm = (operation: string) => {
  //确认对话框
  ElMessageBox.confirm(
    `是否${operation}?`,
    '提示',
    {
      confirmButtonText: `${operation}`,
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    if ("接单" == operation) {
      receiveBook(bookDetail.value.num).then((resp) => {
        if (resp.code == 200) {
          ElMessage.success(resp.msg);
          loadBookDetail();
        } else {
          ElMessage.error(resp.msg);
        }
      }).catch((error) => {

      })
    } else if ("派送" == operation) {
      deliveryBook(bookDetail.value.num).then((resp) => {
        if (resp.code == 200) {
          ElMessage.success(resp.msg);
          loadBookDetail();
        } else {
          ElMessage.error(resp.msg);
        }
      }).catch((error) => {

      })
    } else if ("完成" == operation) {
      completeBook(bookDetail.value.num).then((resp) => {
        if (resp.code == 200) {
          ElMessage.success(resp.msg);
          loadBookDetail();
        } else {
          ElMessage.error(resp.msg);
        }
      }).catch((error) => {

      })
    }
  }).catch(() => {
  })
}

let handleReject = () => {
  rejectBook(bookDetail.value.num, rejectReason.value).then((resp) => {
    if (resp.code == 200) {
      ElMessage.success(resp.msg);
      loadBookDetail();
      dialogRejectVisible.value = false;
    } else {
      ElMessage.error(resp.msg);
    }
  }).catch((error) => {

  })
}

let loadBookDetail = () => {
  getBookDetail(num).then((resp) => {
    bookDetail.value = resp.data;
  })
}

loadBookDetail();

</script>

<style scoped>
.content {
  margin-top: 40px;
}
</style>
